{extend name="public/base" /}
{block name="css"}
<style>
  
  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  img {
    width: 100%;
  }

  .order-title {
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    margin-top: -5px;
    margin-bottom: 0;
  }

  .order-input {
    border: none;
    width: 100%;
    height: 35px;
    margin-top: 10px;
    padding-left: 10px;
    text-align: center;
    border-radius: 24px;
  }

  .order-submit {
    width: 100%;
    height: 35px;
    background: #592B8E;
    color: #ffffff;
    border: none;
    padding: 0 2px;
    margin-top: 10px;
    border-radius: 24px;
  }

  .order-submit:active {
    opacity: .8;
  }

</style>
{/block}
{block name="main"}
<section>
  <img src="https://res.bestyoujia.com/web/ZMYJ/activities/act202108/h5/mj_yd_01.jpg" alt="">
  <div class="d-flex align-items-center justify-content-center" style="position: relative;background: url('https://res.bestyoujia.com/web/ZMYJ/activities/act202108/h5/mj_yd_02.jpg'); background-size: cover; ; padding: 30px 0">
    <div class="wow animate__animated animate__fadeInUp">
      <div class="mx-auto" style="display: flex; flex-direction: column; align-items: center; padding: 20px 10px;border: 2px solid #fff;border-radius: 10px;margin: 0 auto;width: 70vw">
        <p class="order-title">免费获取  美居整配报价</p>
        <div style="display: flex; flex-direction: column; margin-top: .1rem; width: 90%">
          <input class="order-input" id="act-customer" placeholder="您的称呼"/>
          <input class="order-input" id="act-mobile" placeholder="您的联系方式"/>
          <input class="order-input" id="act-building" placeholder="您的小区名称"/>
          <button class="order-submit">立即预约报名</button>
        </div>
      </div>
    </div>
  </div>

  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202108/h5/mj_yd_03.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202108/h5/mj_yd_04.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202108/h5/mj_yd_05.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202108/h5/mj_yd_06.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202108/h5/mj_yd_07.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202108/h5/mj_yd_08.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202108/h5/mj_yd_09.jpg" style="width: 100%; margin-top: -10px;" alt="">
</section>
{/block}
{block name="js"}
<script>
  $.toast.prototype.defaults.duration = 1000;
  $('.order-submit').on('click', function () {
    const mobile = $('#act-mobile').val();
    const mobileStatus = validMobile(mobile);
    switch (mobileStatus) {
      case 1:
        $.showLoading("预约中");

        const data = { mobile, customer: $('#act-customer').val(), building: $('#act-building').val() };

        doAppointment(data,
          function(res) {
            $.hideLoading();
            $.toast("预约成功");
            $('#act-customer').val('');
            $('#act-mobile').val('');
            $('#act-building').val('');
            console.log('onAppointmentSuccess', res);
            const { data = '' } = res;
            if(data) {
              buryingPoint('APPOINTMENT', data);
            }
          }, function(err) {
            console.log('onAppointmentError', err);
            $.hideLoading();
            $.toast(err, "text");
          });

        break;
      case 2:
        $.toast("手机号码格式不正确", "forbidden");
        break;
      case 3:
        $.toast("请输入手机号码", "forbidden");
        break;
    }
  });
</script>
{/block}